<template>
	<div class="app-container foSi14">
		<div class="dis disAl">
			<div class="m-search-filter dis disAl disJuC hei34" :class="stute === 1?'bac6b7':''" @click.stop="stuteClick(1)">新发卡</div>
			<div class="m-search-filter dis disAl disJuC hei34" :class="stute === 2?'bac6b7':''" @click.stop="stuteClick(2)">续卡</div>
			<div class="m-search-filter dis disAl disJuC hei34" :class="stute === 3?'bac6b7':''" @click.stop="stuteClick(3)">卡升级</div>
			<div class="m-search-filter dis disAl disJuC hei34" :class="stute === 4?'bac6b7':''" @click.stop="stuteClick(4)">退卡</div>
		</div>
		<div class="limit-filter">
			<div class="mar-bott10">
				<div class="foSi13" style="height: 20px;color: #838383;">统计时间</div>
				<div class="dis">
					<div class="time-cycle__item time-first" @click.stop="statisticsClick(1)" :class="timeStatistics === 1?'curr':''">本月</div>
					<div class="time-cycle__item" @click.stop="statisticsClick(2)" :class="timeStatistics === 2?'curr':''">最近3个月</div>
					<div class="time-cycle__item time-last" @click.stop="statisticsClick(3)" :class="timeStatistics === 3?'curr':''">最近6个月</div>
					<el-date-picker v-model="birthday_start" style="width: 140px;margin-left: 5px;"
						size="small" type="date" placeholder="开始时间" @change="timeChange" :picker-options="{disabledDate:dateOptions}" />
					<el-date-picker v-model="birthday_end" style="width: 140px;margin-left: 5px;"
						size="small" type="date" placeholder="截至日期" @change="timeChange" :picker-options="{disabledDate:dateOptions}" />
				</div>
			</div>
			<div class="dis">
				<div>
					<div class="foSi13" style="height: 20px;color: #838383;">会籍顾问</div>
					<el-select v-model="membership" style="width: 140px" size="small" placeholder="不指定">
						<el-option v-for="(item,index) in membershipList" :key="index" :label="item.name"
							:value="item.id" />
					</el-select>
				</div>
				<div class="mar-left10">
					<div class="foSi13" style="height: 20px;color: #838383;">状态</div>
					<el-select v-model="type" style="width: 140px" size="small" placeholder="请选择">
						<el-option v-for="(item,index) in typeList" :key="index" :label="item.name"
							:value="item.id" />
					</el-select>
				</div>
				<div class="mar-left10">
					<div class="foSi13" style="height: 20px;color: #838383;">渠道</div>
					<el-select v-model="channel" style="width: 140px" size="small" placeholder="不指定">
						<el-option v-for="(item,index) in channelList" :key="index" :label="item.name"
							:value="item.id" />
					</el-select>
				</div>
				<div class="mar-left10">
					<div class="foSi13" style="height: 20px;color: #838383;">支付方式</div>
					<el-select v-model="payment" style="width: 140px" size="small" placeholder="请选择">
						<el-option v-for="(item,index) in paymentList" :key="index" :label="item.name"
							:value="item.id" />
					</el-select>
				</div>
				<div style="margin-left: 10px">
					<div class="foSi13" style="height: 20px;color: #838383;">会员</div>
					<el-input v-model="name" size="small" placeholder="姓名/手机号" />
				</div>
				<div class="hei32 dis disAl mar-left10 mar-top20">
					<el-checkbox v-model="checked">过滤体验卡</el-checkbox>
				</div>
				<div class="dis disAl" style="padding-top: 20px;">
					<el-button type="primary" size="small" class="mar-left10 bac6b7" @click.stop="suosouClick">查询</el-button>
					<el-button type="primary" class="mar-left10 bac6b7" size="small">导出报表</el-button>
				</div>
			</div>
		</div>
		<div v-if="stute === 1">
			<div class="dis disAl mar-top20 mar-bott10">
				累计发卡共<span style="color: #6b7cdd;">0</span>张，发卡实收总金额共<span style="color: #6b7cdd;">0</span>元
			</div>
			<el-table v-loading="listLoading" :data="list" stripe style="width: 100%">
				<div slot="empty" class="m-empty-box">
					<div class="mar" style="width: 168px;height: 180px;">
						<img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100">
					</div>
					<div class="title">暂无数据</div>
				</div>
				<el-table-column prop="name" label="卡号" />
				<el-table-column prop="name" label="卡名称" />
				<el-table-column prop="name" label="会员" />
				<el-table-column prop="name" label="实收金额" />
				<el-table-column prop="name" label="储值卡支付金额" />
				<el-table-column prop="name" label="支付方式" />
				<el-table-column prop="name" label="发卡日期" />
				<el-table-column prop="name" label="会籍顾问" />
				<el-table-column prop="name" label="发卡余额" style="color: #6b7cdd;" />
				<el-table-column prop="name" label="操作人" />
			</el-table>
			<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
				@pagination="getList" />
		</div>
		<div v-if="stute === 2">
			<div class="dis disAl mar-top20 mar-bott10">
				累计续卡共<span style="color: #6b7cdd;">0</span>张，续卡实收总金额共<span style="color: #6b7cdd;">0</span>元
			</div>
			<el-table v-loading="listLoading" :data="list" stripe style="width: 100%">
				<div slot="empty" class="m-empty-box">
					<div class="mar" style="width: 168px;height: 180px;">
						<img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100">
					</div>
					<div class="title">暂无数据</div>
				</div>
				<el-table-column prop="name" label="卡号" />
				<el-table-column prop="name" label="卡名称" />
				<el-table-column prop="name" label="会员" />
				<el-table-column prop="name" label="实收金额" />
				<el-table-column prop="name" label="储值卡支付金额" />
				<el-table-column prop="name" label="支付方式" />
				<el-table-column prop="name" label="会籍顾问" />
				<el-table-column prop="name" label="发卡余额" style="color: #6b7cdd;" />
				<el-table-column prop="name" label="操作时间	" />
				<el-table-column prop="name" label="操作人" />
			</el-table>
			<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
				@pagination="getList" />
		</div>
		<div v-if="stute === 3">
			<div class="dis disAl mar-top20 mar-bott10">
				累计卡升级共<span style="color: #6b7cdd;">0</span>张，卡升级实收总金额共<span style="color: #6b7cdd;">0</span>元
			</div>
			<el-table v-loading="listLoading" :data="list" stripe style="width: 100%">
				<div slot="empty" class="m-empty-box">
					<div class="mar" style="width: 168px;height: 180px;">
						<img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100">
					</div>
					<div class="title">暂无数据</div>
				</div>
				<el-table-column prop="name" label="卡号" />
				<el-table-column prop="name" label="会员" />
				<el-table-column prop="name" label="升级前名称" />
				<el-table-column prop="name" label="升级后名称" />
				<el-table-column prop="name" label="实收金额" />
				<el-table-column prop="name" label="储值卡支付金额" />
				<el-table-column prop="name" label="支付方式" />
				<el-table-column prop="name" label="会籍顾问" />
				<el-table-column prop="name" label="发卡余额" style="color: #6b7cdd;" />
				<el-table-column prop="name" label="操作时间	" />
				<el-table-column prop="name" label="操作人" />
			</el-table>
			<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
				@pagination="getList" />
		</div>
		<div v-if="stute === 4">
			<div class="dis disAl mar-top20 mar-bott10">
				累计退卡共<span style="color: #6b7cdd;">0</span>张，退卡实收总金额共<span style="color: #6b7cdd;">0</span>元
			</div>
			<el-table v-loading="listLoading" :data="list" stripe style="width: 100%">
				<div slot="empty" class="m-empty-box">
					<div class="mar" style="width: 168px;height: 180px;">
						<img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100">
					</div>
					<div class="title">暂无数据</div>
				</div>
				<el-table-column prop="name" label="卡号" />
				<el-table-column prop="name" label="卡名称" />
				<el-table-column prop="name" label="会员" />
				<el-table-column prop="name" label="发卡日期" />
				<el-table-column prop="name" label="退卡日期" />
				<el-table-column prop="name" label="现卡折价" />
				<el-table-column prop="name" label="退卡手续费" />
				<el-table-column prop="name" label="协议退款金额" />
				<el-table-column prop="name" label="协议退款金额" />
				<el-table-column prop="name" label="退款路径" />
				<el-table-column prop="name" label="会籍顾问" />
				<el-table-column prop="name" label="操作人" />
			</el-table>
			<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
				@pagination="getList" />
		</div>
	</div>
</template>

<script>
	// import fetchList from '@/api/article'
	import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex'
	import {
		getConsultant
	} from '@/api/member'
	export default {
		name: 'statisticsCards',
		components: {
			Pagination
		},
		data() {
			return {
				timeStatistics: 1,
				birthday_start: '',
				birthday_end: '',
				membershipList: [],
				membership: null,
				type: 1,
				typeList: [{
					id: 1,
					name: '正常'
				}, {
					id: 2,
					name: '全部'
				}, {
					id: 3,
					name: '删除'
				}],
				channel: null,
				channelList: [{
					id: 1,
					name: '线上'
				}, {
					id: 2,
					name: '线下'
				}],
				payment: null,
				paymentList: [{
					id: 1,
					name: '商户扫码'
				}, {
					id: 2,
					name: '用户扫码'
				}, {
					id: 3,
					name: '现金支付'
				}, {
					id: 4,
					name: '储值卡支付'
				}, {
					id: 5,
					name: '线下银行卡'
				}, {
					id: 6,
					name: '线下微信'
				}, {
					id: 7,
					name: '线下支付宝'
				}, {
					id: 8,
					name: '线下其它'
				}, {
					id: 9,
					name: '线上支付'
				}],
				name: '',
				checked: false,
				stute: 1,
				list: null,
				total: 0,
				listLoading: false,
				listQuery: {
					page: 1,
					limit: 20
				},
				// 选择今天及今天以后的日期
				dateOptions(time) {
					return time.getTime() >= Date.now() - 8.64e6;
				},
				dateOptions1(time) {
					return time.getTime() < Date.now() - 8.64e7;
				},
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var xuanList = [{
				name: '收入汇总',
				url: '/finance/incomeSummary',
				pd: true
			}, 
			{
				name: '售卡统计',
				url: '/finance/statisticsCards',
				pd: true
			}, 
			{
				name: '班课数据统计',
				url: '/course/classPrivateData',
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 1
			})
			getConsultant().then(response => {
				const {
					data
				} = response
				this.membershipList = data
			});
			this.timeCreated(1)
		},
		methods: {
			suosouClick(){
				this.listQuery.page = 1
				this.getList()
			},
			timeCreated(index){
				var now = new Date();
				var month = now.getMonth();
				var year = now.getFullYear();
				var first = new Date(year, month, 1);
				var three_first = new Date(month<2?year-1:year, month<2?12-2+month:month-2, 1);
				var six_first = new Date(month<5?year-1:year, month<5?12-5+month:month-5, 1);
				if(index === 1){
					this.birthday_start = first
				}else if(index === 2){
					this.birthday_start = three_first
				}else{
					this.birthday_start = six_first
				}
				this.birthday_end = now
			},
			statisticsClick(index){
				if(index !== this.timeStatistics){
					this.timeStatistics = index
					this.timeCreated(index)
				}
			},
			timeChange(e){
				this.timeStatistics = 0
			},
			stuteClick(type){
				if(type !== this.stute){
					this.stute = type
					this.listLoading = true
					this.getList()
				}
			},
			getList() {
				this.listLoading = false
			}
		}
	}
</script>

<style scoped>
	.app-container{
		padding: 20px;
	}
	.m-search-filter {
		padding: 0 24px;
	    margin-right: 10px;
	    cursor: pointer;
	    border: 1px solid #d9d9d9;
	    border-radius: 20px;
	}
	.limit-filter {
	    position: relative;
	    margin-top: 13px;
	    padding: 15px 0 15px 30px;
	    border: 1px solid #d9d9d9;
	    border-radius: 4px;
	}
	.time-first {
	    border-radius: 4px 0 0 4px;
	}
	.time-last {
		border-radius: 0 4px 4px 0;
	}
	.time-cycle__item {
	    position: relative;
	    margin-left: -1px;
	    width: 72px;
	    height: 32px;
	    line-height: 32px;
	    text-align: center;
	    color: #787878;
	    border: 1px solid #d9d9d9;
	    cursor: pointer;
	}
	.time-cycle__item.curr {
	    border: 1px solid #6b7cdd;
	    color: #6b7cdd;
	    z-index: 2;
	}
</style>